<template>
  <a-form :form="form">
    <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol">
      <a-radio-group v-decorator="['verificationType']" button-style="solid" @change="verificationTypeChange">
        <a-radio-button value="part">
          部分核销
        </a-radio-button>
        <a-radio-button value="all">
          全部核销
        </a-radio-button>
      </a-radio-group>
    </a-form-item>
    <a-form-item label="核销币种" :labelCol="labelCol" :wrapperCol="wrapperCol">
      <j-dict-select-tag type="list" v-decorator="['verificationCurrency', validatorRules.verificationCurrency]"
                         :trigger-change="true" dictCode="currency" placeholder="请选择核销币种"
                         @change="verificationCurrencyChange" />
    </a-form-item>
    <a-form-item label="核销金额" :labelCol="labelCol" :wrapperCol="wrapperCol"
                 :help="'剩余账单金额：'+parseFloat(this.data.amount-this.data.writeOffAmount)">
      <a-input-number style="width: 100%"
                      @blur="calcProfit"
                      :disabled="!verificationTypeVisible"
                      v-decorator="['writeOffAmount', validatorRules.writeOffAmount]"></a-input-number>
    </a-form-item>
    <a-form-item v-if="verificationTypeVisible" label="核销汇率" :labelCol="labelCol" :wrapperCol="wrapperCol"
                 help="核销汇率: 核销币种折算成账单币种的汇率">
      <a-input-number style="width: 100%"
                      @blur="calcProfit"
                      v-decorator="['verificationRate', validatorRules.verificationRate]"></a-input-number>
    </a-form-item>
    <a-form-item v-if="verificationTypeVisible" label="未核销金额" :labelCol="labelCol" :wrapperCol="wrapperCol"
                 help="未核销金额=账单金额-核销金额*汇率">
      {{ unCancelPrice }}{{ unCancelCurrency }}
    </a-form-item>
    <a-form-item label="核销时间" :labelCol="labelCol" :wrapperCol="wrapperCol">
      <j-date placeholder="请选择核销时间" v-decorator="['verificationTime', validatorRules.verificationTime]"
              :trigger-change="true"
              style="width: 100%" date-format="YYYY-MM-DD HH:mm:ss" :show-time=true />
    </a-form-item>
    <a-form-item label="核销方式" :labelCol="labelCol" :wrapperCol="wrapperCol">
      <a-select v-decorator="['verificationMode', validatorRules.verificationMode]"
                placeholder="请选择核销方式">
        <a-select-option value="1">
          现金
        </a-select-option>
        <a-select-option value="2">
          转账
        </a-select-option>
      </a-select>
    </a-form-item>
    <a-form-item label="核销账号" :labelCol="labelCol" :wrapperCol="wrapperCol">
      <a-input v-decorator="['verificationAccount']" placeholder="请输入核销账号"
               style="width: 100%" />
    </a-form-item>
  </a-form>

</template>

<script>

import JDate from '@/components/jeecg/JDate'
import moment from 'moment'
import { getAction, httpAction } from '@api/manage'
import { FormTypes } from '@/utils/JEditableTableUtil'

export default {
  name: 'BillCancelForm',
  components: {
    JDate
  },
  props: {
    // 数据源
    data: {
      type: Object,
      required: true,
      default: () => {
      }
    }
  },

  data() {
    return {
      verificationTypeVisible: true,
      unCancelPrice: '0',
      unCancelCurrency: 'CNY',
      form: this.$form.createForm(this, { name: 'horizontal_login' }),
      labelCol: {
        xs: { span: 24 },
        sm: { span: 6 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 }
      },
      validatorRules: {
        verificationCurrency: {
          rules: [
            { required: true, message: '请选择核销币种' }
          ]
        },
        writeOffAmount: {
          rules: [
            { required: true, message: '账单金额不能为空' }
          ]
        },
        verificationRate: {
          rules: [
            { required: true, message: '核销汇率不能为空' }
          ]
        },
        verificationMode: {
          rules: [
            { required: true, message: '核销方式不能为空' }
          ]
        },
        verificationTime: {
          rules: [
            { required: true, message: '请选择核销时间' }
          ]
        }
      }
    }
  },
  mounted() {
  },
  methods: {
    setValue() {
      this.verificationTypeVisible = true
      this.form.setFieldsValue({
        'verificationTime': this.getTime(),
        'writeOffAmount': parseFloat(this.data.amount - this.data.writeOffAmount),
        'verificationRate': 1,
        'verificationCurrency': 'CNY',
        'verificationType': 'part'
      })
    },
    getTime: function() {
      var _this = this
      let yy = new Date().getFullYear()
      let mm = new Date().getMonth() + 1
      let dd = new Date().getDate()
      let hh = new Date().getHours()
      let mf = new Date().getMinutes() < 10 ? '0' + new Date().getMinutes() : new Date().getMinutes()
      let ss = new Date().getSeconds() < 10 ? '0' + new Date().getSeconds() : new Date().getSeconds()
      return yy + '-' + mm + '-' + dd + ' ' + hh + ':' + mf + ':' + ss
    },
    verificationCurrencyChange(e) {
      this.unCancelCurrency = e
    },
    verificationTypeChange(e) {
      if (e.target.value == 'part') {
        this.form.setFieldsValue({ 'verificationRate': '1' })
        this.verificationTypeVisible = true
      } else if (e.target.value == 'all') {
        this.form.setFieldsValue({ 'writeOffAmount': parseFloat(this.data.amount - this.data.writeOffAmount) })
        this.verificationTypeVisible = false
      }
    },
    calcProfit() {
      let writeOffAmount = this.form.getFieldValue('writeOffAmount')
      let verificationRate = this.form.getFieldValue('verificationRate')
      let total = this.data.amount - this.data.writeOffAmount
      this.unCancelPrice = total - (writeOffAmount * verificationRate)
    },

    handleOk() {
      this.form.validateFields((err, values) => {
        if (!err) {
          let url = '/box.bill/verification', method = 'post'
          values['id'] = this.data.id
          values['billNumber'] = this.data.billNumber
          httpAction(url, values, method).then((res) => {
            if (res.success) {
              this.$message.success(res.message)
            } else {
              this.$message.warning(res.message)
            }
            this.$emit('cb', true)
          }).finally(() => {

          })
        } else {
          this.$emit('cb', false)
        }
      })
    }
  }

}
</script>

<style>
.ant-form-explain {
  color: red
}

.ant-radio-group {
  float: right;
}
</style>